<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        h3 {
            padding: 20px 10px;
        }

        li {
            list-style: none;
        }

        .list li {
            line-height: 45px;
            text-indent: 10px;
            border: 1px solid #333;
        }

        .buttonGroup {
            margin-top: 20px;
        }

        .active {
            background-color: #6ff;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <h3 id="title">批量操作元素</h3>
        <div class="list">
            <li class="first">01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </div>
    </div>

    <button>存储数据</button>
    <button>获取数据</button>
    <button>删除数据</button>
</body>
<script>
    // each()   遍历jquery对象
    // $(".list li").each(function (index, item) {
    //     console.log(index, item, this);
    // })

    // length  jquery对象(伪数组 => 集合中元素的个数)
    // console.log($(".list li").length);

    // index()  返回匹配元素对应的下标(默认 相对于同级)
    // index(selector) 传入一个选择器 可以作为查询下标的范围

    // $(".list li").click(function () {
    //     // console.log($(this).index()); // (默认 相对于同级)
    //     console.log($(this).index(".list li")); // (默认 相对于同级)
    // })

    // data()        在元素上存取数据 (jquery自己新增的一种对应元素存储数据的方式 键值可以存储任意类型)  
    // data(key,val)    对应键名 存储数据 
    // data(key)        对应键名 获取数据 


    // removeData(key)  删除 在元素上存放数据  删(对应属性名)

    $("button").eq(0).click(function(){
        $(".list li").data("num", 100);
        $(".list li").data("str", "hello");
        $(".list li").data("bool", true);

        var arr = [1, 3 , 4];
        $(".list li").data("arr", arr);

        var obj = { a:1 , b:2 };
        $(".list li").data("obj", obj);
    })

    $("button").eq(1).click(function(){
        console.log($(".list li").data("num"));
        console.log($(".list li").data("str"));
        console.log($(".list li").data("bool"));
        console.log($(".list li").data("arr"));
        console.log($(".list li").data("obj"));
    })

    $("button").eq(2).click(function(){
        $(".list li").removeData("num");
        $(".list li").removeData("str");
        $(".list li").removeData("bool");
        $(".list li").removeData("arr");
        $(".list li").removeData("obj");
    })
</script>
</html>